<template>
  <div class="slider-block">
    <div class="slider-item" :class="{'check': item.linkName === activateModel}" v-for="item in modelList"
         :key="item.linkName">
      <p class="demonstration">{{ item.name }}</p>
      <!--        <span class="demonstration">绕y轴旋转</span>-->
      <el-slider v-model.lazy="item.value" show-input :show-tooltip="false" :min="item.min" :max="item.max" :step="1"
                 @input="sliderInput($event, item.jointName,item.linkName)"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'slider-dom',
  props: {
    list: {
      type: Array,
      default() {
        return []
      },
    },
    activateModel: String,// 当前选中的
  },
  data() {
    return {
      // min: Number(-Math.PI.toFixed(2)),
      // max: Number(Math.PI.toFixed(2)),
      isInit: true,// 开关 控制初始化时 不触发 sliderInput
      modelList: [],
    };
  },
  watch: {
    list(newVal) {
      if (newVal.length) {
        this.isInit = true
        this.modelList = JSON.parse(JSON.stringify(newVal))
        this.$nextTick(() => {
          this.isInit = false
        })
      }
    },
  },
  methods: {
    sliderInput(e, name, direction) {
      if (this.isInit) return;
      this.$emit('sliderInput', e, name, direction);
    },
    rest() {
      this.modelList = JSON.parse(JSON.stringify(this.list))
    }
  },
};
</script>
<style scoped lang="scss">
.slider-block {
  padding: 2vw;

  .slider-item {
    padding: 10px;

    .demonstration {
      margin: 10px 0;
    }
  }

  .check {
    border: 2px solid #409EFF;
    border-radius: 8px;
  }
}
</style>
